<template>
    <layout>
        <div class='wrapper'>
            <van-cell-group>
                <van-cell title="任务名：" :value="dataInfo.taskName"></van-cell>
                <van-cell title="任务地点：" :value="dataInfo.taskLocation"></van-cell>
                <van-cell title="所需人数：" :value="dataInfo.peopleNumber"></van-cell>
                <van-cell title="薪酬：" :value="dataInfo.emolument"></van-cell>
                <van-cell title="任务状态：" :value="formaTaskState(dataInfo.taskState)"></van-cell>
                <van-cell title="任务时间：" :value="dataInfo.taskStartDate+'-'+dataInfo.taskEndDate"></van-cell>
                <van-cell title="报名时间：" :value="dataInfo.signStartDate+'-'+dataInfo.signEndDate"></van-cell>
                <van-cell title="联系人：" :value="dataInfo.linkName"></van-cell>
                <van-cell title="手机号：" :value="dataInfo.linkPhone"></van-cell>
                <van-cell title="备注：" :value="dataInfo.remark"></van-cell>
            </van-cell-group>
            <div class="btn">
                <van-button type="info" round block @click="signUp">报 名</van-button>
            </div>
        </div>
    </layout>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import sampleInfoApi from '@/api/sampleInfo';
export default {
    // import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        // 这里存放数据
        return {
            oepnId:"",
            taskId:"",
            nurseId:"",
            dataInfo:{}
        }
    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 方法集合
    methods: {
        init(){
            if(this.$route.query.openId) this.openId = this.$route.query.openId;
            if(this.$route.query.taskId) this.taskId = this.$route.query.taskId;
            if(this.$route.query.nurseId) this.nurseId = this.$route.query.nurseId;
            this.getData()
        },
        getData(){
            let params = {
                openId:this.openId,
                id:this.taskId
            }
            sampleInfoApi.getDetailedInfoById(params)
                .then(res=>{
                    if(res.status==0){
                        this.taskId = res.data.taskId
                        this.dataInfo = res.data

                    }else{
                        this.$dialog.alert({
                            title:"提示",
                            message:res.msg
                        })
                    }
                })
        },
        formaTaskState(val){
            if(val==1){
                return '待开启'
            }else if(val==2){
                return "报名中"
            }else if(val==3){
                return "已结束"
            }

        },
        signUp(){
            let params = {
                taskId:Number(this.taskId),
                nurseId:this.nurseId,
                openId:this.openId,
            }

            console.log(params,87)
            this.$dialog.confirm({
                title:"确认？",
                message:"您确定要报名吗?"
            }).then(res=>{
                sampleInfoApi.nurseChooseTask(params)
                    .then(res=>{
                        if(res.status==0){
                            this.$toast({
                                type:"success",
                                message:res.msg
                            })
                        }else{
                            this.$dialog.alert({
                                title:"提示",
                                message:res.msg
                            })
                        }
                    })
            })
                
        }

    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.init()
    },
    beforeCreate() { }, // 生命周期 - 创建之前
    beforeMount() { }, // 生命周期 - 挂载之前
    beforeUpdate() { }, // 生命周期 - 更新之前
    updated() { }, // 生命周期 - 更新之后
    beforeDestroy() { }, // 生命周期 - 销毁之前
    destroyed() { }, // 生命周期 - 销毁完成
    activated() { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
    .wrapper{
        width: 93%;
        margin: auto;
        border-radius: 10px;
        background-color: white;
        overflow: hidden;
        box-shadow: 0 0 12px rgba(0,0,0,10%);
        .btn{
            padding: 20px;
        }
    }
</style>